<template>
    <div>
       <el-card>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getList">
                        <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
                    </el-input> 
                </el-col>
            </el-row> 
            <!-- 学号 姓名 年龄 性别 系别 身高 体重 胸围 日期 -->
            <!-- phexamstuid phexamstuname phexamstuage phexamstusex phexamstusdept phexamheight phexamdate phexamlength phexamweight -->
    <el-table
      :data="list"
      border=""
      style="width: 100%">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column
        prop="phexamstuid"
        label="学号">
      </el-table-column>
      <el-table-column
        prop="phexamstuname"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phexamstuage"
        label="年龄"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phexamstusex"
        label="性别"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phexamstusdept"
        label="系别"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phexamheight"
        label="身高"
        width="100">
      </el-table-column>
       <el-table-column
        prop="phexamweight"
        label="体重"
        width="100">
      </el-table-column>
       <el-table-column
        prop="phexamlength"
        label="胸围"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phexamdate"
        label="日期"
        width="250">
      </el-table-column>    
      <el-table-column
            label="操作"
            width="270">    
            <template  slot-scope="scope">  
            <el-row>
                    <el-button type="primary" @click="dialogVisible1 = true">修改</el-button>
                    <el-button type="danger" @click="removeByID(scope.row.phexamstuid)">删除</el-button>
            </el-row>
            </template>
        </el-table-column>
    </el-table>
       </el-card>
       <!-- 修改对话框 -->
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose">
            <!-- phexamstuid phexamstuname phexamstuage phexamstusex phexamstusdept phexamheight phexamdate phexamlength phexamweight -->
            <!-- 学号 姓名 年龄 性别 系别 身高 体重 胸围 日期 -->
            <span>修改信息</span>
            <div>
                <el-form ref="tableData" :model="editForm" label-width="80px" :rules= "rules">
                    <el-form-item label="学号:" style="width: 400px" prop="phexamstuid">
                        <el-input placeholder="请输入系别" v-model="editForm.phexamstuid"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:" style="width: 400px" prop="phexamstuname">
                        <el-input placeholder="请输入系别" v-model="editForm.phexamstuname"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄:" style="width: 200px" prop="phexamstuage">
                        <el-input placeholder="请输入年龄" v-model="editForm.phexamstuage"></el-input>
                    </el-form-item>
                    <el-form-item label="性别:" style="width: 400px" prop="phexamstusex">
                        <el-input placeholder="请输入系别" v-model="editForm.phexamstusex"></el-input>
                    </el-form-item>
                    <el-form-item label="系别:" style="width: 400px" prop="phexamstusdept">
                        <el-input placeholder="请输入系别" v-model="editForm.phexamstusdept"></el-input>
                    </el-form-item>
                    <el-form-item label="身高:" style="width: 210px" prop="phexamheight">
                        <el-input placeholder="请输入诊断详情" v-model="editForm.phexamheight"></el-input>
                    </el-form-item>
                     <el-form-item label="体重:" style="width: 210px" prop="phexamweight">
                        <el-input placeholder="请输入诊断详情" v-model="editForm.phexamweight"></el-input>
                    </el-form-item>
                     <el-form-item label="胸围:" style="width: 210px" prop="phexamlength">
                        <el-input placeholder="请输入诊断详情" v-model="editForm.phexamlength"></el-input>
                    </el-form-item>
                    <el-form-item label="日期" prop= "phexamdate">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="选择日期"  style="width: 200px;" v-model="editForm.phexamdate"></el-date-picker>
                        </el-col>
                    </el-form-item>
                </el-form>    
            </div>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible1 = false">取 消</el-button>
                 <el-button type="primary" @click="editCaseBook">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除对话框 --> 
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose">
            <span>确认删除此信息</span>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible2 = false">取 消</el-button>
                 <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除对话框结束 -->
    </div>
</template>

<script>
export default {
    data() {
        return{
            queryInfo: {
                pagenum: '1',
                pagesize: '10000',
                query: '',
            },
            tableData: [{
                date2: '',
                sex2: '',
                no2: '',
                name2: '',
                dept2: '',
                age2: '',
                diagnosis: ''
            }],
            dialogVisible1: false,
            dialogVisible2: false,
            rules: {
                dept2: [
                    {required: true, message: '请输入系别', trigger: 'blur'}
                ],
                age2: [
                    { required: true, message: '年龄不能为空'},
                    { type: 'number', message: '年龄必须为数字值'},
                    { pattern: /^(0|[1-9]\d?|100)$/, message: '范围在0-100',trigger: 'blur'}
                ],
                date2: [
                    {type: 'date', required: true, message: '请输入正确日期', trigger: 'blur'}
                ]
            },
            list: [],
             // phexamstuid phexamstuname phexamstuage phexamstusex phexamstusdept phexamheight phexamdate phexamlength phexamweight
            editForm: {
                phexamstuid: '',
                phexamstuname: '',
                phexamstuage: '',
                phexamstusex: '',
                phexamstusdept: '',
                phexamheight: '',
                phexamdate: '',
                phexamlength: '',
                phexamweight: '',
            }
        }
    },
    created () {
        this.getList()
    },
   methods: {
       handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
        },  
        async getList () {
            const { data: res } = await this.$http.get('/system/apis/phexam', { params: this.queryInfo })
            if (res.code !== 20000) return this.$message.error('获取员工列表失败')
            this.list = res.data.value
            this.total = res.data.total
        },
          // phexamstuid phexamstuname phexamstuage phexamstusex phexamstusdept phexamheight phexamdate phexamlength phexamweight
        async editCaseBook () {
            console.log(this.editForm)
             const { data: res } = await this.$http.put('/system/apis/phexam', {
                phexamstuid: this.editForm.phexamstuid,
                phexamstuname: this.editForm.phexamstuname,
                phexamstuage: this.editForm.phexamstuage,
                phexamstusex: this.editForm.phexamstusex,
                phexamstusdept: this.editForm.phexamstusdept,
                phexamheight: this.editForm.phexamheight,
                phexamdate: this.editForm.phexamdate,
                phexamlength: this.editForm.phexamlength,
                phexamweight: this.editForm.phexamweight,
                })
                if (res.code !== 20000) return this.$message.error('更新用户信息失败!')
                // 关闭对话框
                this.dialogVisible1 = false
                // 刷新数据列表
                this.getList()
                // 爱上的健康
                this.$message.success('更新用户信息成功')
        },
        async removeByID (id)   {
            console.log(id)
            const confirmResult = await this.$confirm('此操作将永久删除该病历, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
             if (confirmResult !== 'confirm') {
                return this.$message.info('已经取消删除')
            }
            const { data: res } = await this.$http.delete('/system/apis/phexam/' + id)
            if (res.code !== 20000) {
                return this.$message.error('删除用户失败！')
            }
            this.$message.success('删除用户成功！')
            this.getList()
        }
   }
}
</script>